<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>percentage-test</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>

        <script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/listview/ctp.ui.listview.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>
		<script type='text/javascript' src='../../js/ctp/percentage/ctp.ui.percentage.js'></script>
		<script>var CTP_WEB_FULLPATH='../../';</script>
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/label.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/listview.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script>
        	//ctp.core.log.lvl = ctp.core.loglvl.obj; //需要进行调试时启用
			$(document).ready(function(){
				 var  percentage1 = new ctp.ui.percentage({
	                  id:'percentage1',
	                  value:[500,100],
	                  width:'100%'
	                 // renderTo:'body'
	        	   });
				 var  percentage2 = new ctp.ui.percentage({
	                  id:'percentage2',
	                  value:'0.2',
	                  leftColor:'blue', 
	                  rightColor:'yellow' ,
	                  rightValueColor:'green',           
	                  width:'100%',
	                  showAll:false
	                 // renderTo:'body'
	        	   });
				 var  percentage3 = new ctp.ui.percentage({
	                  id:'percentage3',
	                  value:'80%',	                  
	                  width:'100%'
	                 // renderTo:'body'
	        	   });
				
				
                var _mainlayout = new ctp.ui.gridlayout({
                    id: 'mainlayout',
					width: '100%',
					align: 'center',
					cols: 3,
					defaults: {},
					label:{width:'80px'},
					items: [
						[{element: percentage1},{element:percentage2},{element:percentage3}]
					]
                });
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[_mainlayout],
					title:'效果展示区'						   
			    });
				var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '取得组件ID',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:percentage1.getId()});
                    }
                });
				var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:percentage1.getCtpWebType()});
                    }
                });
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '取得组件名称',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:percentage1.getName()});
                    }
                });
                var button4=new ctp.ui.button({
                    id: 'button4',
                    text: '取得组件值',
                    width: '100%',
                    onClick: function(){
                	  alert( percentage1.getValue());
                    }
                });
				var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '取得右侧的显示值',
                    width: '100%',
                    onClick: function(){                
					   ctpMSB.alert({title:'信息提示',message:percentage1.getRightValue()});
                  }
                });
				var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '将组件值设置为80%',
                    width: '100%',
                    onClick: function(){
                     percentage1.setValue("80%");
                    }                                        
                });
                var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){                
						percentage1.hide();
                    }
                });
                 var button10=new ctp.ui.button({
                    id: 'button10',
                    text: '将total设置为1000',
                    width: '100%',
                    onClick: function(){                
						percentage1.setTotal(1000);
                    }
                });
                
                var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                	   percentage1.show();
                    }                   
                });
                var button9=new ctp.ui.button({
                    id: 'button9',
                    text: '删除组件',
                    width: '100%',
                    onClick: function(){                
						percentage1.remove();
                    }
                });

				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
					     [{element: button4},{element: button5},{element: button6}],
					     [{element: button7},{element: button8},{element: button9}],
					     [{element:button10}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'gridlayout实例',
                    collapsible: true,
                    width: '750px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });
			});
		</script>
	</head>
	<body>
		<b>ctp.ui.gridlayout实例</b>
        <hr/>
        <br/>
	</body>
</html>